<template>
	<view>
		<view class="main">
			<block v-if="videoStream">
				<view class="mainvideo" :class="doPlay?'show':''">
					<!-- #ifdef H5 -->
					<video ref="myVideo" id="myVideo" :src="videoStream" class="main-video" x5-playsinline playsinline="true"
					 webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen
					 x5-video-orientation="portraint" @error="videoErrorCallback" @timeupdate="videoPlaying" autoplay="true"
					 object-fit="cover" loop="true" muted></video>
					<!-- #endif -->
				</view>
			</block>
			<view class="live-controller" v-if="isPlaying">
				<view class="playbtn bmg-center" v-if="isPlaying && !doPlay" @tap="playLive">
					<image :src="CLOUDPATH+'/college/btn-play.png'" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script>
	function sendPlay() {
		document.addEventListener('UniAppJSBridgeReady', function() {
			uni.postMessage({
				data: {
					action: 'play'
				}
			}); //传递的消息信息，必须写在 data 对象中。
		});
	}

	export default {
		components: {},
		props: {},
		created: function(e) {},
		onLoad(options) {
			if (options.vpath) {
				this.videoStream = options.vpath
			}
		},
		data() {
			return {
				videoStream: null,
				videoContext: null,
				CLOUDPATH: this.$config.cloudPath,
				isPlaying: true,
				doPlay: false
			}
		},
		methods: {
			playLive() {
				if (!this.videoContext) this.videoContext = uni.createVideoContext('myVideo')
				this.$nextTick((r) => {
					this.videoContext.play()
					this.doPlay = true
					sendPlay()
				})
			},
			videoPlaying(e) {
				if (e.detail.currentTime > 0) {
					this.tp = Date.parse(new Date())
					if (this.tpError) {
						this.tpError = false
						uni.hideLoading()
					}
				}
			},
			videoErrorCallback: function(e) {
				console.log(e)
				setTimeout((r) => {
					this.playLive()
				}, 1000)
			},
		},
	}
</script>

<style>
	.main-video {
		width: 100%;
		height: 100%;
		background-color: rgb(0, 0, 0, 0);
		/* z-index: -1; */
		position: absolute;
	}

	.live-controller {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}


	.main {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.playbtn {
		position: absolute;
		left: 0;
		top: 0;
		/* background-color: rgb(0, 0, 0, 0.3); */
	}

	.playbtn image {
		width: 120rpx;
		height: 120rpx;
		cursor: pointer;
	}

	.bmg-center {
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.mainvideo {
		opacity: 0;
	}

	.mainvideo.show {
		opacity: 1;
	}
</style>
